<script lang="ts">
  import { Grid, gridHelp } from "$lib/js/svelte-grid";
  import FolderDetailProperties from "./FolderDetailProperties.svelte";
  import FolderDetailEdgesInto from "./FolderDetailEdgesInto.svelte";
  import FolderDetailEdgesOut from "./FolderDetailEdgesOut.svelte";
  import type { Folder, KV, Quiz } from "$lib/ebm";

  export let attributes: KV[] = [
    {
      k: "subject",
      v: "en",
    },
  ];

  let folderid = attributes.find((x) => x.k == "tab_id");

  const id = () => "_" + Math.random().toString(36).substring(2,9);

  let items = [
    {
      6: gridHelp.item({
        x: 0,
        y: 0,
        w: 6,
        h: 3,
      }),
      component: FolderDetailProperties,
      attributes: [{ k: "folder_id", v: folderid.v }],
      id: id(),
    },

    {
      6: gridHelp.item({
        x: 0,
        y: 3,
        w: 6,
        h: 6,
      }),
      component: FolderDetailEdgesOut,
      attributes: [{ k: "folder_id", v: folderid.v }],
      id: id(),
    },

    // {
    //   6: gridHelp.item({
    //     x: 3,
    //     y: 3,
    //     w: 3,
    //     h: 6,
    //   }),
    //   component: FolderDetailEdgesInto,
    //   attributes: [{ k: "folder_id", v: folderid.v }],
    //   id: id(),
    // },
  ];

  const cols = [[1200, 6]];
</script>

<div class="bg-gray-50">
  <Grid bind:items rowHeight={100} let:item let:dataItem {cols} gap={[2, 2]}>
    <div class="bg-green-300 border-2 h-full w-full overflow-scroll">
      <svelte:component
        this={dataItem.component}
        attributes={dataItem.attributes}
      />
    </div>
  </Grid>
</div>
